<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		// Edit by xingoo
		// Fork on my github:https://github.com/xinghalo/CodeJS/tree/master/HTML5
		var ctx;
		var cwidth = 400;
		var cheight = 600;
		var objects = [];
		var birdIndex = 0;
		var ver1 = 10;
		var ver2;
		var gravity = 2;
		var pipe_height = 200;
		var velocity = 10;
		var tid;
		var score = 0;
		var isScore = false;

		var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];

		var back = new Background(0,0,400,600,"./images/bg.png");
		var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");
		var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");
		var ground = new Background(0,550,400,200,"./images/ground.png");
		var bird = new Bird(80,300,40,40,birds);

		objects.push(back);
		objects.push(up_pipe);
		objects.push(down_pipe);
		objects.push(ground);
		objects.push(bird);

		function UpPipe(x,y,width,height,img_src){
			this.px = x;
			this.py = y;
			this.pwidth = width;
			this.pheight = height;
			this.img_src = img_src;
			this.draw = drawUpPipe;
		}

		function DownPipe(x,y,width,height,img_src){
			this.px = x;
			this.py = y;
			this.pwidth = width;
			this.pheight = height;
			this.img_src = img_src;
			this.draw = drawDownPipe;
		}

		function drawUpPipe(){
			var image = new Image();
			image.src = this.img_src;
			ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);
		}

		function drawDownPipe(){
			var image = new Image();
			image.src = this.img_src;
			ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);
		}

		function Background(x,y,width,height,img_src){
			this.bgx = x;
			this.bgy = y;
			this.bgwidth = width;
			this.bgheight = height;
			var image = new Image();
			image.src = img_src;
			this.img = image;
			this.draw = drawbg;
		}

		function drawbg(){
			ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);
		}

		function Bird(x,y,width,height,img_srcs){
			this.bx = x;
			this.by = y;
			this.bwidth = width;
			this.bheight = height;
			this.imgs = img_srcs;
			this.draw = drawbird;
		}

		function drawbird(){
			birdIndex++;
			var image = new Image();
			image.src = this.imgs[birdIndex%3];
			ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
		}

		function calculator(){
			if(bird.by+bird.bheight>ground.bgy ||
				((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(	bird.by<up_pipe.py+up_pipe.pheight))||
				((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(	bird.by<up_pipe.py+up_pipe.pheight))||
				((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by<down_pipe.py+down_pipe.pheight))||
				((bird.bx>down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))){
				clearInterval(tid);
				ctx.fillStyle = "rgb(255,255,255)";
				ctx.font = "30px Accent";
				ctx.fillText("You got "+score+"!",110,100)
				return;
			}

			ver2 = ver1+gravity;
			bird.by += (ver2+ver1)*0.5;

			if(up_pipe.px+up_pipe.pwidth>0){
				up_pipe.px -= velocity;
				down_pipe.px -= velocity;
			}else{
				up_pipe.px = 400;
				down_pipe.px = 400;
				up_pipe.pheight = 100+Math.random()*200;
				down_pipe.py = up_pipe.pheight+pipe_height;
				down_pipe.pheight = 600-down_pipe.py;
				isScore = true;
			}

			if(isScore && bird.bx>up_pipe.px+up_pipe.pwidth){
				score += 1;
				isScore = false;
				if(score>0 && score%10 === 0){
					velocity++;
				}
			}

			ctx.fillStyle = "rgb(255,255,255)";
			ctx.font = "30px Accent";
			if(score>0){
				score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);
			}
		}

		function drawall(){
			ctx.clearRect(0,0,cwidth,cheight);
			var i;
			for(i=0;i<objects.length;i++){
				objects[i].draw();
			}
			calculator();
		}

		function keyup(e){
		    var e = e||event;
		   	var currKey = e.keyCode||e.which||e.charCode;
	       	switch (currKey){
		    	case 32:
		    		bird.by -= 80;
				    break;
		    }
		}	

		function init(){
			ctx = document.getElementById('canvas').getContext('2d');
			document.onkeyup = keyup;
			drawall();
			tid = setInterval(drawall,80);
		}
	</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="400" height="600" style="margin-left:200px;">
	Your browser is not support canvas! 
</canvas>
</body>
</html>